<script setup>
import { onMounted, ref } from 'vue'
import { login } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const router = useRouter()

// 表单数据
const form = ref({
  username: '',
  password: '',
  remenberMe: false,
  publicKey: '',
})

const authStore = useAuthStore()
onMounted(async () => {
  // 获取token，获取公钥
  await authStore.getTokenAction()
  await authStore.initPublicKeyAction()
})

// 用户登陆
const userLogin = async () => {
  form.value.publicKey = await authStore.getPublicKeyAction()
  if (await login(form.value)) {
    Message.success('登陆成功')
    router.push('/home')
  }
}
</script>

<template>
  <div class="login-box">
    <a-form :model="form" :style="{ width: '600px' }" class="login-form" auto-label-width>
      <a-form-item field="username" label="用户名">
        <a-input v-model="form.username" />
      </a-form-item>
      <a-form-item field="password" label="密码">
        <a-input-password v-model="form.password" />
      </a-form-item>
      <a-form-item field="remenberMe">
        <a-checkbox v-model="form.remenberMe">记住我</a-checkbox>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button @click="userLogin">登陆</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped>
.login-box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-image: url('@/assets/lty.png');
}
.login-form {
  padding: 50px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.9);
}
</style>